<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
    <% include ../partial/meta %>
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <link rel="stylesheet" href="/app/static/css/frozen.css">
    <link rel="stylesheet" href="/app/static/css/client.css">
    <script type="text/javascript" src ="/app/static/js/zepto.min.js"></script>
    <script src="/app/static/js/three.min.js"></script>
    <style>
        html ,body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        canvas {
            width: 100%;
            height: calc(100% - 52px);
        }
        .footer {
            background: #fff;
        }
        .footer div {
            height: 100%;
            text-align: center;
            line-height: 52px;
            padding: 0;
        }
        .footer div.current {
            color: #FE7C73;
        }
        .scale {
            position: absolute;
            right: 24px;
            top: 24px;
            font-size: 18px;
            color: rgba(0, 0, 0, 0.72);
            background: rgba(255,255,255,0.2);
            box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
        }
        .scale span {
            display: inline-block;
            padding: 4px 12px;
        }
    </style>
</head>
<body>
    <div class="scale">
        <span class="max">+</span><span class="min">-</span>
    </div>
    <div class ="footer">
        <div class="ui-row-flex ui-whitespace">
            <%
                if(panoramic.resources.length > 0) {
            %>

                <%
                    for(var i = 0;i < panoramic.resources.length;i++) {
                %>
                    <%
                        if(i == 0) {
                    %>
                    <div class="ui-col ui-col current" name ="pic"><%= panoramic.resources[i].name %></div>
                    <%
                        } else {
                    %>
                    <div class="ui-col ui-col" name ="pic"><%= panoramic.resources[i].name %></div>
                    <%
                        } 
                    %>
                <%
                    }
                %>
            <%
                } else {
            %>
                <p class="center" style ="width:100%">该房源无全景图片</p>
            <%
                } 
            %>
        </div>
    </div>
    <script>
        (function(){
            var manualControl = false;
            var longitude = 0;
            var latitude = 0;
            var savedX;
            var savedY;
            var savedLongitude;
            var savedLatitude;
            var fov = 90;
            var rat = 0.1;

            // setting up the renderer
            renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            // creating a new scene
            var scene = new THREE.Scene();

            // adding a camera
            var camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, 1, 1000);
            camera.target = new THREE.Vector3(0, 0, 0);

            // creation of a big sphere geometry
            var sphere = new THREE.SphereGeometry(100, 100, 40);
            sphere.applyMatrix(new THREE.Matrix4().makeScale(-1, 1, 1));

            // creation of the sphere material
            var sphereMaterial = new THREE.MeshBasicMaterial();
            
            THREE.ImageUtils.crossOrigin = '';
            sphereMaterial.map = THREE.ImageUtils.loadTexture('')

            // geometry + material = mesh (actual object)
            var sphereMesh = new THREE.Mesh(sphere, sphereMaterial);
            scene.add(sphereMesh);

            // listeners
            var support = 'ontouchstart' in window;
            var start = support ? 'touchstart' : 'mousedown';
            var move = support ? 'touchmove' : 'mousemove';
            var end = support ? 'touchend' : 'mouseup';
            $("canvas")[0].addEventListener(start, onDocumentMouseDown, false);
            $("canvas")[0].addEventListener(move, onDocumentMouseMove, false);
            $("canvas")[0].addEventListener(end, onDocumentMouseUp, false);

            render();

            function render() {

                requestAnimationFrame(render);
                if (!manualControl) {
                    longitude += rat;
                }

                // limiting latitude from -85 to 85 (cannot point to the sky or under your feet)
                latitude = Math.max(-85, Math.min(85, latitude));

                // moving the camera according to current latitude (vertical movement) and longitude (horizontal movement)
                camera.target.x = 500 * Math.sin(THREE.Math.degToRad(90 - latitude)) * Math.cos(THREE.Math.degToRad(longitude));
                camera.target.y = 500 * Math.cos(THREE.Math.degToRad(90 - latitude));
                camera.target.z = 500 * Math.sin(THREE.Math.degToRad(90 - latitude)) * Math.sin(THREE.Math.degToRad(longitude));
                camera.lookAt(camera.target);

                // calling again render function
                renderer.render(scene, camera);

            }

            // when the mouse is pressed, we switch to manual control and save current coordinates
            function onDocumentMouseDown(e) {

                event.preventDefault();

                manualControl = true;

                savedX = e.clientX ? e.clientX : e.changedTouches[0].clientX;
                savedY = e.clientY ? e.clientY : e.changedTouches[0].clientY;

                savedLongitude = longitude;
                savedLatitude = latitude;

            }

            // when the mouse moves, if in manual contro we adjust coordinates
            function onDocumentMouseMove(e) {

                var moveX = e.clientX ? e.clientX : e.changedTouches[0].clientX;
                var moveY = e.clientY ? e.clientY : e.changedTouches[0].clientY;
                if (manualControl) {
                    longitude = (savedX - moveX) * 0.1 + savedLongitude;
                    latitude = (moveY - savedY) * 0.1 + savedLatitude;
                }

            }

            function onClickResize(calc) {
                rat *= 2/3
                manualControl = true;
                    switch (calc) {
                        case "-":
                            if(fov <= 110) {
                                fov += 10;
                            }
                            break;
                        case "+":
                            if(fov >= 50) {
                                fov -= 10;
                            }
                            break;
                    }
                
                camera.projectionMatrix.makePerspective( fov, window.innerWidth / window.innerHeight, 1, 1000 );
                render();

            }


            // when the mouse is released, we turn manual control off
            function onDocumentMouseUp(event) {

                manualControl = false;
            }

            var picData            = JSON.parse('<%- JSON.stringify(panoramic.resources) %>');
            var picElement         = $("[name='pic']");
            // 这是你展示图片的url
            function loadBy(url) {
                sphereMaterial.map = THREE.ImageUtils.loadTexture(url);
            }
            var max = $('.max');
            var min = $('.min');
            max.on('click', function(event) {
                onClickResize('+')
            });
            min.on('click', function(event) {
                onClickResize('-')
            });

            if(picData.length > 0) {
                loadBy(picData[0].pic)
            }
            picElement.on('click', function(event) {
                selectPic.call($(this))
            });
            function selectPic() {
                picElement.removeClass('current')
                $(this).addClass('current')
                var index = this.index()
                loadBy(picData[index].pic)
            }

            
        })();
    </script>
    <% include ../partial/analyse %>
</body>

</html>
